$(function () {
    // 解构form模块
    const { form } = layui
    // 昵称验证
    form.verify({
        username: function (value, item) { //value：表单的值、item：表单的DOM对象
            if (value.length > 6) {
                return '用户名必须在1 ~ 6位之间'
            }
        }
    });

    getUserInfo()

    // 获取用户基本信息的方法
    function getUserInfo() {
        $.ajax({
            type: "get",
            url: "/my/userinfo",
            success: function (res) {
                // 用户身份认证失败, 如果在当前getUserInfo请求中处理身份认证问题, 只针对当前的请求有效果
                if (res.status != 0) {
                    return layer.msg(res.message)
                }
                layer.msg('用户数据获取成功');
                // 给个人中心快速赋值(后端给的数据 属性名必须要和input框内的 name="值" 要保持一致, 这样才能快速赋值)
                form.val('formUserInfo', res.data)
            }
        });
    }
    // 重置表单的数据
    $('#btnReset').on('click', function (e) {
        // 阻止表单的默认重置行为
        e.preventDefault()
        // 不能直接去操作DOM, 而是重新从后端拿数据进行渲染
        getUserInfo()
    })

    // 监听表单的提交事件
    $('.layui-form').on('submit', function (e) {
        // 阻止表单的默认提交行为
        e.preventDefault()
        // 发起 ajax 数据请求
        $.ajax({
            method: 'POST',
            url: '/my/userinfo',
            data: $(this).serialize(),
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg('更新用户信息失败！')
                }
                layer.msg('更新用户信息成功！')
                // 调用父页面中的方法，重新渲染用户的头像和用户的信息
                // iframe标签特点: 父页面不能操作子页面DOM和js, 但是子页面可以操作父页面DOM和js
                // window.parent就是父页面全局作用域
                window.parent.getUserInfo()
            }
        })
    })
})

